<script>
import { getFaultCount } from '@/api/echarts'
import * as echarts from 'echarts';
import 'echarts-gl';

export default {
  name: "income",
  props: ['month'],
  data() {
    return {
      chartData: {
        faultTypes: [],
        counts: []
      }
    }
  },
  mounted() {
    this.fetchFaultCount();
  },
  methods: {
    async fetchFaultCount() {
      try {
        const response = await getFaultCount(Number(this.month));
        console.log('当前月份故障统计数据:', response); // 打印返回的数据
        
        // 假设返回的数据结构是 response.data.msg
        const faultData = response.data.msg;
        
        // 将数据处理成ECharts需要的格式
        this.chartData.faultTypes = faultData.map(item => item.content);
        this.chartData.counts = faultData.map(item => item.count);
        
        // 调用绘制图表的方法
        this.getEchartLeft3();
      } catch (error) {
        console.error('获取故障统计数据时出错:', error);
      }
    },
    getEchartLeft3() {
      let myChart = echarts.init(document.getElementById('chart_left3'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          },
          formatter: (value) => {
            return value[0].name + '故障数量：<br>' + value[0].value + '次';
          }
        },
        grid: {
          top: '5%',
          left: '2%',
          right: '2%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            },
          },
          axisLabel: {
            textStyle: {
              color: '#24c4ff',
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: this.chartData.faultTypes // 使用从接口获取的故障类型
        }],
        yAxis: [{
          min: 0,
          splitLine: {
            show: false,
            lineStyle: {
              color: '#092b5d'
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#092b5d"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#24c4ff',
            }
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '故障数量',
          type: 'line',
          symbol: 'circle',
          showAllSymbol: true,
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#7c80f4', // 线条颜色
            },
            borderColor: 'rgba(0,0,0,.4)',
          },
          itemStyle: {
            color: "rgba(14,30,73,1)",
            borderColor: "#646ace",
            borderWidth: 2
          },
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: ' {a|{c}}',
              rich: {
                a: {
                  color: '#fff',
                  align: 'center',
                },
              }
            }
          },
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: "rgba(124, 128, 244,.3)"
              },{
                offset: 1,
                color: "rgba(124, 128, 244, 0)"
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)',
              shadowBlur: 20
            }
          },
          data: this.chartData.counts // 使用从接口获取的故障数量
        }]
      };

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    // 可选：清理图表实例
  }
};
</script>

<style lang="scss" scoped>
.income-container {
  .chart {
    height: 3rem;
  }
}
</style>
